<template>
    <el-container class="common-layout">
        <el-aside>
        <div>
          <sidebar/>
        </div>
        </el-aside>
        <el-container>
          <el-header style="width:950px;background-color: white;margin-left: -40px;" >
            <div>
              <el-button color="#f93684" :plain="false" class="btn">全部</el-button>
              <el-button color="#f93684" plain class="btn" type="primary">视频课</el-button>
              <el-button color="#f93684" plain class="btn">线下课</el-button>
              <el-button color="#f93684" plain class="btn">直播课</el-button>
              <el-button color="#f93684" plain round class="btn1" @click="centerDialogVisible=true">创建</el-button>
            </div>
          </el-header>
        <el-main class="main">
          <el-row v-for="i in PracticeList">
            <el-col :span="5"><div class="grid-content ep-bg-purple" />
              <img :src="i.cover" style="width: 169px;height: 101px;margin: 10px;">
            </el-col>
            <el-col :span="8" style="margin: auto;padding:auto font-size:16px"><div class="grid-content ep-bg-purple-light" />
              <div >{{i.planName}}</div>
              <div style="font-size:12px; margin-top:20px">已练习0次9分钟</div>
            </el-col>
            <el-col :span="3" style="margin: auto"><div class="grid-content ep-bg-purple" />
            </el-col>
            <el-col :span="5" style="margin:auto"><div class="grid-content ep-bg-purple-light" />
              <el-button type="danger" @click="deleteList">删除</el-button>
            </el-col>
          </el-row>
          <!-- <el-row v-for="i in PracticeList" :span="5">
            <img :src="i.cover" alt="" style="width: 169px;height: 101px;margin: 20px;">
            <span style="font-size:18px;font-weight:600;margin-top:15px;margin-left:15px">{{i.planName}} <br></span>           
          </el-row> -->
          
        </el-main>
        </el-container>
    </el-container>
    <el-dialog v-model="centerDialogVisible" width="20%" center>
      <span>请打开 中舞网APP 扫码,使用此功能</span>
      
      <img src="/static/二维码.jpg" style="width:200px;height:200px;margin-left: 10px;" />
      <div style="text-align:center">
        扫描此二维码，同样可下载
      </div>
      <div style="color: red;text-align:center"> “中舞网APP”</div>
      
    </el-dialog>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import practiceApi from '@/api/practice'
import sidebar from '@/views/practice/sidebar/index.vue'
import dayjs from "dayjs";
import { ElMessage } from "element-plus";

const deleteList = ()=>{
   ElMessage.success('删除成功')
}
const centerDialogVisible = ref(false)

const PracticeList = ref<any>()
onMounted(()=>{
  getPracticeList()
})
const getPracticeList = async ()=>{
  let result = await (practiceApi.getPracticeList()) as any
  PracticeList.value = result.content
  console.log(result.content)
}
  </script>
<style scoped lang="less">

.common-layout{
  background-color: rgb(245, 247, 249);
  .dialog-footer button:first-child {
  margin-right: 10px;
}
  
  .btn{
    margin: 15px;
  }
  .btn1{
    float:right;
    margin-top: 20px;
  }
  .main{
    width:950px;
    margin-left:-40px;
    margin-top:10px;
    background-color: white;
    height: 700px;
    .img1{
    position: relative;
    .img{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
    
  }
  }
  .el-menuSize{
    padding:0,10px;
  }
  
}
</style>